<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- 中心内容 -->
<ion-side-menu-content>
	<ion-header-bar class="bar-dark">
	    <button class="button button-icon" ng-click="toggleProjects()">
	    	<i class="icon ion-navicon"></i>
	    </button>
	    <h1 class="title">侧栏滑动</h1>
	    <!-- 新增按钮 -->
	    <button class="button button-icon" ng-click="newTask()">
	    	<i class="icon ion-compose"></i>
	    </button>
  	</ion-header-bar>
	<ion-content scroll="false">
		<ion-list>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
			<ion-item>第一个</ion-item>
		</ion-list>
	</ion-content>
</ion-side-menu-content>
<!-- 左边栏 -->
<ion-side-menu side="left">
	<ion-header-bar class="bar-dark">
		<h1 class="title">侧栏</h1>
		<button class="button button-icon ion-plus" ng-click="newProject()"></button>
	</ion-header-bar>
	<ion-content scroll="false">
		<ion-list>
	    	<ion-item ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
	    		侧栏一
	    	</ion-item>
	    	<ion-item >侧栏一</ion-item>
	    	<ion-item >侧栏二</ion-item>
	    	<ion-item >侧栏三</ion-item>
	    	<ion-item >侧栏四</ion-item>
	  	</ion-list>
	</ion-content>
</ion-side-menu>
<script type="text/javascript">
var myApp = angular.module("todo",['ionic']);
myApp.controller('TodoCtrl', function($scope,$ionicSideMenuDelegate) {
	$scope.toggleProjects = function() {
		$ionicSideMenuDelegate.toggleLeft();
	}; 
});
</script>
</body>
</html>
